<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>


<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />

<meta name="theme-color" content="#f8f5ec" />
<meta name="msapplication-navbutton-color" content="#f8f5ec">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="#f8f5ec">



  <meta name="description" content="Vuex案例"/>




  <meta name="keywords" content="Vue技术, 金色的大海" />










  <link rel="alternate" href="/blog/default" title="金色的大海">




  <link rel="shortcut icon" type="image/x-icon" href="/blog/favicon.ico?v=2.9.0" />



<link rel="canonical" href="http://jy4416.gitee.io/blog/2020/04/14/vuex/"/>



  <link rel="stylesheet" type="text/css" href="/blog/lib/fancybox/jquery.fancybox.css" />




  <link rel="stylesheet" type="text/css" href="/blog/lib/nprogress/nprogress.min.css" />



<link rel="stylesheet" type="text/css" href="/blog/css/style.css?v=2.9.0" />



  



  <script id="baidu_push">
(function(){
    var bp = document.createElement('script');
    var curProtocol = window.location.protocol.split(':')[0];
    if (curProtocol === 'https') {
        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
    }
    else {
        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
    }
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(bp, s);
})();
</script>








<script>
  window.config = {"title":"金色的大海","subtitle":"","description":"","author":"jy","language":"zh-cn","timezone":"","url":"http://jy4416.gitee.io/blog","root":"/blog/","permalink":":year/:month/:day/:title/","permalink_defaults":null,"pretty_urls":{"trailing_index":true,"trailing_html":true},"source_dir":"source","public_dir":"public","tag_dir":"tags","archive_dir":"archives","category_dir":"categories","code_dir":"downloads/code","i18n_dir":":lang","skip_render":null,"new_post_name":":title.md","default_layout":"post","titlecase":false,"external_link":{"enable":true,"field":"site","exclude":""},"filename_case":0,"render_drafts":false,"post_asset_folder":true,"relative_link":false,"future":true,"highlight":{"enable":true,"auto_detect":false,"line_number":true,"tab_replace":"","wrap":true,"hljs":false},"default_category":"uncategorized","category_map":null,"tag_map":null,"date_format":"YYYY-MM-DD","time_format":"HH:mm:ss","use_date_for_updated":false,"per_page":10,"pagination_dir":"page","theme":"hexo-theme-even","server":{"port":4000,"log":false,"compress":false,"header":true,"cache":false},"deploy":{"type":"git","repo":"https://gitee.com/j4416/blog.git","branch":"master"},"ignore":null,"meta_generator":true,"keywords":null,"index_generator":{"per_page":10,"order_by":"-date","path":""},"include":null,"exclude":null,"category_generator":{"per_page":10},"archive_generator":{"per_page":10,"yearly":true,"monthly":true,"daily":false},"marked":{"gfm":true,"pedantic":false,"breaks":true,"smartLists":true,"smartypants":true,"modifyAnchors":"","autolink":true,"sanitizeUrl":false,"headerIds":true},"tag_generator":{"per_page":10},"since":2020,"favicon":"/favicon.ico","rss":"default","menu":{"Home":"/","Archives":"/archives/","Tags":"/tags","Categories":"/categories","About":"/about"},"color":"Default","toc":true,"fancybox":true,"pjax":true,"copyright":{"enable":true,"license":"<a rel=\"license\" href=\"http://creativecommons.org/licenses/by-nc/4.0/\" target=\"_blank\">知识共享署名-非商业性使用 4.0 国际许可协议</a>"},"reward":{"enable":false,"qrCode":{"wechat":null,"alipay":null}},"social":{"email":"jy4416@aliyun.com","stack-overflow":null,"twitter":null,"facebook":null,"linkedin":null,"google":null,"github":"https://github.com/jy4416","weibo":null,"zhihu":null,"douban":null,"pocket":null,"tumblr":null,"instagram":null},"leancloud":{"app_id":null,"app_key":null},"baidu_analytics":null,"baidu_verification":null,"google_analytics":null,"google_verification":null,"disqus_shortname":null,"changyan":{"appid":null,"appkey":null},"livere_datauid":null,"version":"2.9.0"};
</script>

    <title> Vuex案例 - 金色的大海 </title>
  <meta name="generator" content="Hexo 4.2.0"></head>

  <body><div id="mobile-navbar" class="mobile-navbar">
  <div class="mobile-header-logo">
    <a href="/blog/." class="logo">金色的大海</a>
  </div>
  <div class="mobile-navbar-icon">
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>

<nav id="mobile-menu" class="mobile-menu slideout-menu">
  <ul class="mobile-menu-list">
    
      <a href="/blog/">
        <li class="mobile-menu-item">
          
          
            首页
          
        </li>
      </a>
    
      <a href="/blog/archives/">
        <li class="mobile-menu-item">
          
          
            归档
          
        </li>
      </a>
    
      <a href="/blog/tags">
        <li class="mobile-menu-item">
          
          
            标签
          
        </li>
      </a>
    
      <a href="/blog/categories">
        <li class="mobile-menu-item">
          
          
            分类
          
        </li>
      </a>
    
      <a href="/blog/about">
        <li class="mobile-menu-item">
          
          
            关于
          
        </li>
      </a>
    
  </ul>
</nav>

    <div class="container" id="mobile-panel">
      <header id="header" class="header"><div class="logo-wrapper">
  <a href="/blog/." class="logo">金色的大海</a>
</div>

<nav class="site-navbar">
  
    <ul id="menu" class="menu">
      
        <li class="menu-item">
          <a class="menu-item-link" href="/blog/">
            
            
              首页
            
          </a>
        </li>
      
        <li class="menu-item">
          <a class="menu-item-link" href="/blog/archives/">
            
            
              归档
            
          </a>
        </li>
      
        <li class="menu-item">
          <a class="menu-item-link" href="/blog/tags">
            
            
              标签
            
          </a>
        </li>
      
        <li class="menu-item">
          <a class="menu-item-link" href="/blog/categories">
            
            
              分类
            
          </a>
        </li>
      
        <li class="menu-item">
          <a class="menu-item-link" href="/blog/about">
            
            
              关于
            
          </a>
        </li>
      
    </ul>
  
</nav>

      </header>

      <main id="main" class="main">
        <div class="content-wrapper">
          <div id="content" class="content">
            
  
  <article class="post">
    <header class="post-header">
      <h1 class="post-title">
        
          Vuex案例
        
      </h1>

      <div class="post-meta">
        <span class="post-time">
          2020-04-14
        </span>
        
          <div class="post-category">
            
              <a href="/blog/categories/Web%E5%89%8D%E7%AB%AF/">Web前端</a>
            
          </div>
        
        
      </div>
    </header>

    
    
  <div class="post-toc" id="post-toc">
    <h2 class="post-toc-title">文章目录</h2>
    <div class="post-toc-content">
      <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#Vuex基础"><span class="toc-text">Vuex基础</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#Vuex是什么"><span class="toc-text">Vuex是什么</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Vuex使用"><span class="toc-text">Vuex使用</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#安装Vuex"><span class="toc-text">安装Vuex</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#引用Vuex"><span class="toc-text">引用Vuex</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#创建仓库Store"><span class="toc-text">创建仓库Store</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Vuex核心"><span class="toc-text">Vuex核心</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#State"><span class="toc-text">State</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#Getter"><span class="toc-text">Getter</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#定义"><span class="toc-text">定义</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#组件调用"><span class="toc-text">组件调用</span></a><ol class="toc-child"><li class="toc-item toc-level-6"><a class="toc-link" href="#计算属性"><span class="toc-text">计算属性</span></a></li><li class="toc-item toc-level-6"><a class="toc-link" href="#mapGetters"><span class="toc-text">mapGetters</span></a></li></ol></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#Mutations"><span class="toc-text">Mutations</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#定义-1"><span class="toc-text">定义</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#调用"><span class="toc-text">调用</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#Actions"><span class="toc-text">Actions</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#定义-2"><span class="toc-text">定义</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#组件调用-1"><span class="toc-text">组件调用</span></a><ol class="toc-child"><li class="toc-item toc-level-6"><a class="toc-link" href="#分发actions"><span class="toc-text">分发actions</span></a></li><li class="toc-item toc-level-6"><a class="toc-link" href="#mapActions"><span class="toc-text">mapActions</span></a></li></ol></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#Module"><span class="toc-text">Module</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#背景"><span class="toc-text">背景</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#模块访问"><span class="toc-text">模块访问</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#全局访问"><span class="toc-text">全局访问</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#命名空间"><span class="toc-text">命名空间</span></a><ol class="toc-child"><li class="toc-item toc-level-6"><a class="toc-link" href="#namespaced"><span class="toc-text">namespaced</span></a></li><li class="toc-item toc-level-6"><a class="toc-link" href="#调用-1"><span class="toc-text">调用</span></a></li><li class="toc-item toc-level-6"><a class="toc-link" href="#map调用"><span class="toc-text">map调用</span></a></li></ol></li></ol></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#项目案例"><span class="toc-text">项目案例</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#安装脚手架"><span class="toc-text">安装脚手架</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#初始化项目"><span class="toc-text">初始化项目</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#安装Vuex-1"><span class="toc-text">安装Vuex</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#新建Store"><span class="toc-text">新建Store</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#index-js"><span class="toc-text">index.js</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#配置Vuex"><span class="toc-text">配置Vuex</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#新建组件A"><span class="toc-text">新建组件A</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#新建组件B"><span class="toc-text">新建组件B</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#路由配置"><span class="toc-text">路由配置</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#项目启动"><span class="toc-text">项目启动</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#执行结果"><span class="toc-text">执行结果</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#默认"><span class="toc-text">默认</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#点击按钮"><span class="toc-text">点击按钮</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#跳转B"><span class="toc-text">跳转B</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#点击按钮-1"><span class="toc-text">点击按钮</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#跳转A"><span class="toc-text">跳转A</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#模块练习"><span class="toc-text">模块练习</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#添加模块"><span class="toc-text">添加模块</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#引入模块"><span class="toc-text">引入模块</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#组件A调用"><span class="toc-text">组件A调用</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#组件B调用"><span class="toc-text">组件B调用</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#结果"><span class="toc-text">结果</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#试一下"><span class="toc-text">试一下</span></a></li></ol>
    </div>
  </div>



    <div class="post-content">
      
        <h2 id="Vuex基础"><a href="#Vuex基础" class="headerlink" title="Vuex基础"></a>Vuex基础</h2><h3 id="Vuex是什么"><a href="#Vuex是什么" class="headerlink" title="Vuex是什么"></a>Vuex是什么</h3><p>Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。</p>
<p>简单理解，Vuex采用<strong>类似全局对象</strong>的形式来管理所有组件的<strong>公用数据</strong>，如果想修改这个全局对象的数据，得按照Vuex提供的方式来修改（不能自己随意用自己的方式来修改）。</p>
<a id="more"></a>

<p>Vuex状态管理跟使用传统全局变量的不同之处：</p>
<ol>
<li>Vuex的状态存储是响应式的：当你的组件使用到了这个Vuex的状态，一旦它改变了，所有关联的组件都会自动更新相对应的数据，这样开发变得简单。</li>
<li>不能直接修改Vuex的状态：如果是个全局对象变量，要修改很容易，但是在Vuex中不能这样做，想修改就得使用Vuex提供的唯一途径：显示地提交（commint）在mutations来实现修改。这样做的好处就是方便我们跟踪每一个状态的变化，在开发过程中调试的时候，非常实用。<br><img src="http://i2.tiimg.com/709257/13bab3fe765baf18.png" alt="Markdown"></li>
</ol>
<h3 id="Vuex使用"><a href="#Vuex使用" class="headerlink" title="Vuex使用"></a>Vuex使用</h3><h4 id="安装Vuex"><a href="#安装Vuex" class="headerlink" title="安装Vuex"></a>安装Vuex</h4><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install vuex --save</span><br></pre></td></tr></table></figure>

<h4 id="引用Vuex"><a href="#引用Vuex" class="headerlink" title="引用Vuex"></a>引用Vuex</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> Vue <span class="keyword">from</span> <span class="string">'vue'</span></span><br><span class="line"><span class="keyword">import</span> Vuex <span class="keyword">from</span> <span class="string">'vuex'</span></span><br><span class="line">Vue.use(Vuex)</span><br></pre></td></tr></table></figure>

<h4 id="创建仓库Store"><a href="#创建仓库Store" class="headerlink" title="创建仓库Store"></a>创建仓库Store</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> store = <span class="keyword">new</span> Vuex.Store(&#123;&#125;);</span><br></pre></td></tr></table></figure>

<h3 id="Vuex核心"><a href="#Vuex核心" class="headerlink" title="Vuex核心"></a>Vuex核心</h3><p><strong>State、  Getter、  Mutation、  Action、  Module</strong></p>
<h4 id="State"><a href="#State" class="headerlink" title="State"></a>State</h4><p><strong>需要保存的基本数据</strong></p>
<p>每个应用将仅仅包含一个 Store 实例，Store相当于一个容器，包含应用中大部分的<strong>状态 (state)</strong>。</p>
<p>Vuex的作用类似全局对象，Vuex 使用单一状态树，用一个对象<strong>State</strong>包含了整个应用层级的所有状态。可以这样理解，这些状态就是一堆全局变量和数据。</p>
<p>Store一般保存的数据:</p>
<ul>
<li>组件的初始数据          </li>
<li>后台返回来的初始数据</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//store/index.js</span></span><br><span class="line">.....</span><br><span class="line"><span class="keyword">const</span> state = &#123;</span><br><span class="line">    name: <span class="string">'默认组件'</span> <span class="comment">//保存全局的数据</span></span><br><span class="line">&#125;</span><br><span class="line">.....</span><br><span class="line"><span class="keyword">const</span> store = <span class="keyword">new</span> Vuex.Store(&#123;</span><br><span class="line">    state, <span class="comment">// 共同维护的一个状态，state里面可以是很多个全局状态</span></span><br><span class="line">    getters, <span class="comment">// 获取数据并渲染</span></span><br><span class="line">    actions, <span class="comment">// 数据的异步操作</span></span><br><span class="line">    mutations<span class="comment">// 处理数据的唯一途径，state的改变和赋值都在这里</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<h4 id="Getter"><a href="#Getter" class="headerlink" title="Getter"></a>Getter</h4><p>从store的state中派生出的状态</p>
<h5 id="定义"><a href="#定义" class="headerlink" title="定义"></a>定义</h5><p>getters接收state作为其第一个参数，接受其他 getters 作为第二个参数，如不需要，第二个参数可以省略</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//store/index.js</span></span><br><span class="line">.....</span><br><span class="line"><span class="keyword">const</span> getters = &#123;</span><br><span class="line">    name: <span class="function"><span class="params">state</span> =&gt;</span> state.name,</span><br><span class="line">    bname: <span class="function"><span class="params">state</span> =&gt;</span> &#123;</span><br><span class="line">        <span class="keyword">return</span> state.name + <span class="string">"-B"</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h5 id="组件调用"><a href="#组件调用" class="headerlink" title="组件调用"></a>组件调用</h5><h6 id="计算属性"><a href="#计算属性" class="headerlink" title="计算属性"></a>计算属性</h6><p>可以通过Vue的<code>Computed</code>获得Vuex的getters</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//HomeB.vue</span></span><br><span class="line">......</span><br><span class="line">computed: &#123;</span><br><span class="line">    name: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">      <span class="comment">//获得name的名字</span></span><br><span class="line">      <span class="keyword">return</span> <span class="keyword">this</span>.$store.getters.bname;</span><br><span class="line"> &#125;</span><br></pre></td></tr></table></figure>

<h6 id="mapGetters"><a href="#mapGetters" class="headerlink" title="mapGetters"></a>mapGetters</h6><p>还可以使用mapGetters 辅助函数将 store 中的 getters 映射到局部计算属性</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//HomeA.vue</span></span><br><span class="line">......</span><br><span class="line">computed: &#123;</span><br><span class="line">    ...mapGetters([<span class="string">"name"</span>]) <span class="comment">// 动态计算属性，相当于this.$store.getters.resturantName</span></span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>

<h4 id="Mutations"><a href="#Mutations" class="headerlink" title="Mutations"></a>Mutations</h4><ul>
<li>提交mutation是更改Vuex中的store中的状态的唯一方法。</li>
<li>mutation必须是同步的，如果要异步需要使用action。</li>
</ul>
<h5 id="定义-1"><a href="#定义-1" class="headerlink" title="定义"></a>定义</h5><p>每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，提交载荷作为第二个参数。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//type:SET_NAME  handler: (state,name)=&gt;&#123;&#125;  name:提交载荷</span></span><br><span class="line"><span class="keyword">const</span> mutations = &#123;</span><br><span class="line">    SET_NAME: <span class="function">(<span class="params">state, name</span>) =&gt;</span> &#123;</span><br><span class="line">        state.name = name</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h5 id="调用"><a href="#调用" class="headerlink" title="调用"></a>调用</h5><p>不能直接调用一个 mutation handler。需要以相应的 type 调用 store.commit 方法：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">store.commit(<span class="string">'SET_NAME'</span>, name)</span><br></pre></td></tr></table></figure>

<h4 id="Actions"><a href="#Actions" class="headerlink" title="Actions"></a>Actions</h4><p>Action 类似于 mutation，不同在于：</p>
<ul>
<li>Action 提交的是 mutation，而不是直接变更状态。</li>
<li>Action 可以包含任意异步操作。</li>
</ul>
<h5 id="定义-2"><a href="#定义-2" class="headerlink" title="定义"></a>定义</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> actions = &#123;</span><br><span class="line">    modifyName(&#123; commit &#125;, name) &#123;</span><br><span class="line">        <span class="keyword">return</span> commit(<span class="string">'SET_NAME'</span>, name) <span class="comment">//调用mutations</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h5 id="组件调用-1"><a href="#组件调用-1" class="headerlink" title="组件调用"></a>组件调用</h5><h6 id="分发actions"><a href="#分发actions" class="headerlink" title="分发actions"></a>分发actions</h6><p>Action 通过 <code>store.dispatch</code> 方法触发</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//HomeB.vue</span></span><br><span class="line">........</span><br><span class="line">methods: &#123;</span><br><span class="line">   changeName(myName) &#123;</span><br><span class="line">     <span class="keyword">this</span>.$store.dispatch(<span class="string">"modifyName"</span>, myName);</span><br><span class="line">   &#125;,</span><br><span class="line">   ......</span><br></pre></td></tr></table></figure>

<h6 id="mapActions"><a href="#mapActions" class="headerlink" title="mapActions"></a>mapActions</h6><p>使用 <code>mapActions</code> 辅助函数将组件的 methods 映射为 <code>store.dispatch</code> 调用（需要先在根节点注入 <code>store</code>）</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//HomeA.vue</span></span><br><span class="line"><span class="keyword">import</span> &#123; mapActions, mapGetters &#125; <span class="keyword">from</span> <span class="string">"vuex"</span>;<span class="comment">//注入</span></span><br><span class="line">......</span><br><span class="line">methods: &#123;</span><br><span class="line">    ...mapActions(</span><br><span class="line">      [<span class="string">"modifyName"</span>] </span><br><span class="line">    ),</span><br><span class="line"> ......</span><br></pre></td></tr></table></figure>

<h4 id="Module"><a href="#Module" class="headerlink" title="Module"></a>Module</h4><h5 id="背景"><a href="#背景" class="headerlink" title="背景"></a>背景</h5><p>在Vue中State使用是单一状态树结构，所有的状态都放在state里面，如果项目比较复杂，那state是一个很大的对象，store对象也将变得非常大，难于管理。<br> module：可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。</p>
<h5 id="模块访问"><a href="#模块访问" class="headerlink" title="模块访问"></a>模块访问</h5><p>在模块中，state 是被限制到模块的命名空间下，需要命名空间才能访问。 但actions 和mutations, 其实还有 getters 却没有被限制，在默认情况下，它们是注册到全局命名空间下的，所谓的注册到全局命名空间下，其实就是我们访问它们的方式和原来没有module 的时候是一样的。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">"./assets/logo.png"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">h1</span>&gt;</span>&#123;&#123;useName&#125;&#125;<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"> </span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span><br><span class="line"><span class="actionscript"> <span class="comment">// computed属性，从store 中获取状态state，不要忘记login命名空间。</span></span></span><br><span class="line"> computed: &#123;</span><br><span class="line"><span class="actionscript">  useName: <span class="function"><span class="keyword">function</span><span class="params">()</span> </span>&#123;</span></span><br><span class="line"><span class="actionscript">   <span class="keyword">return</span> <span class="keyword">this</span>.$store.state.login.useName</span></span><br><span class="line">  &#125;</span><br><span class="line"> &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h5 id="全局访问"><a href="#全局访问" class="headerlink" title="全局访问"></a>全局访问</h5><p>但是写在module 中的actions, mutations 和getters, 它们获得的默认参数却不是全局的，都是局部的，被限定在它们所在的模块中的。module 相当于一个小store。如何才能获取到根store 中的state 和 getters ， Vuex 提供了 rootState, rootGetters 作为module 中  getters 中默认参数, actions中context 对象，也会多了两个属性,context.getters, context. rootState,  这些全局的默认参数，都排在局部参数的后面。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> actions = &#123;</span><br><span class="line">  <span class="comment">// actions 中的context参数对象多了 rootState 参数</span></span><br><span class="line">  changeName (&#123;commit, rootState&#125;,anotherName) &#123;</span><br><span class="line">    <span class="keyword">if</span>(rootState.job ==<span class="string">"web"</span>) &#123;</span><br><span class="line">      commit(<span class="string">"change_name"</span>, anotherName)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br><span class="line"> </span><br><span class="line"><span class="keyword">const</span> getters = &#123;</span><br><span class="line">  <span class="comment">// getters 获取到 rootState, rootGetters 作为参数。</span></span><br><span class="line">  <span class="comment">// rootState和 rootGetter参数顺序不要写反，一定是state在前，getter在后面，这是vuex的默认参数传递顺序</span></span><br><span class="line">  localJobTitle (state,getters,rootState,rootGetters) &#123; </span><br><span class="line">    <span class="built_in">console</span>.log(rootState);</span><br><span class="line">    <span class="built_in">console</span>.log(rootGetters);</span><br><span class="line">    <span class="keyword">return</span> rootGetters.jobTitle + <span class="string">" aka "</span> + rootState.job </span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<h5 id="命名空间"><a href="#命名空间" class="headerlink" title="命名空间"></a>命名空间</h5><h6 id="namespaced"><a href="#namespaced" class="headerlink" title="namespaced"></a>namespaced</h6><p>actions, mutations, getters, 也可以限定在当前模块的命名空间中。只要给我们的模块加一个namespaced 属性</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// namespaced 属性，限定命名空间</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  namespaced:<span class="literal">true</span>,</span><br><span class="line">  state,</span><br><span class="line">  mutations,</span><br><span class="line">  actions,</span><br><span class="line">  getters</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h6 id="调用-1"><a href="#调用-1" class="headerlink" title="调用"></a>调用</h6><p>当所有的actions, mutations, getters 都被限定到模块的命名空间下，我们dispatch actions, commit mutations 都需要用到命名空间。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line"><span class="keyword">import</span> &#123;mapActions, mapState,mapGetters&#125; <span class="keyword">from</span> <span class="string">"vuex"</span>;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line"> <span class="comment">// computed属性，从store 中获取状态state，不要忘记login命名空间。</span></span><br><span class="line"> computed: &#123;</span><br><span class="line">  ...mapState(<span class="string">"login"</span>,&#123;</span><br><span class="line">   useName: <span class="function"><span class="params">state</span> =&gt;</span> state.useName</span><br><span class="line">  &#125;),</span><br><span class="line"> </span><br><span class="line">   localJobTitle() &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">this</span>.$store.getters[<span class="string">"login/localJobTitle"</span>]</span><br><span class="line">   &#125;</span><br><span class="line"> &#125;,</span><br><span class="line"> methods: &#123;</span><br><span class="line">  changeName() &#123;</span><br><span class="line">   <span class="keyword">this</span>.$store.dispatch(<span class="string">"login/changeName"</span>, <span class="string">"Jason"</span>)</span><br><span class="line">  &#125;,</span><br><span class="line">  alertName() &#123;</span><br><span class="line">   <span class="keyword">this</span>.$store.dispatch(<span class="string">"login/alertName"</span>)</span><br><span class="line">  &#125;</span><br><span class="line"> &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;<span class="regexp">/script&gt;</span></span><br></pre></td></tr></table></figure>

<h6 id="map调用"><a href="#map调用" class="headerlink" title="map调用"></a>map调用</h6><p>有了命名空间之后，mapState, mapGetters, mapActions 函数也都有了一个参数，用于限定命名空间，每二个参数对象或数组中的属性，都映射到了当前命名空间中。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line"><span class="keyword">import</span> &#123;mapActions, mapState,mapGetters&#125; <span class="keyword">from</span> <span class="string">"vuex"</span>;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line"> computed: &#123;</span><br><span class="line">  <span class="comment">// 对象中的state 和数组中的localJobTitle 都是和login中的参数一一对应。</span></span><br><span class="line">  ...mapState(<span class="string">"login"</span>,&#123;</span><br><span class="line">   useName: <span class="function"><span class="params">state</span> =&gt;</span> state.useName</span><br><span class="line">  &#125;),</span><br><span class="line">  ...mapGetters(<span class="string">"login"</span>, [<span class="string">"localJobTitle"</span>])</span><br><span class="line"> &#125;,</span><br><span class="line"> methods: &#123;</span><br><span class="line">  changeName() &#123;</span><br><span class="line">   <span class="keyword">this</span>.$store.dispatch(<span class="string">"login/changeName"</span>, <span class="string">"Jason"</span>)</span><br><span class="line">  &#125;,</span><br><span class="line">  ...mapActions(<span class="string">'login'</span>, [<span class="string">'alertName'</span>])</span><br><span class="line"> &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;<span class="regexp">/script&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="项目案例"><a href="#项目案例" class="headerlink" title="项目案例"></a>项目案例</h2><h3 id="安装脚手架"><a href="#安装脚手架" class="headerlink" title="安装脚手架"></a>安装脚手架</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">npm install -g vue-cli</span><br><span class="line">vue -V  //查看是否安装成功</span><br></pre></td></tr></table></figure>

<h3 id="初始化项目"><a href="#初始化项目" class="headerlink" title="初始化项目"></a>初始化项目</h3><p>在一个目录下，初始化项目</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">vue init webpack vue-project  //需要安装路由</span><br></pre></td></tr></table></figure>

<h3 id="安装Vuex-1"><a href="#安装Vuex-1" class="headerlink" title="安装Vuex"></a>安装Vuex</h3><p>进入<strong>vue-project</strong>文件夹执行</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install vuex --save</span><br></pre></td></tr></table></figure>

<h3 id="新建Store"><a href="#新建Store" class="headerlink" title="新建Store"></a>新建Store</h3><p>在src目录下新建文件夹store，用于设置Vuex。</p>
<h4 id="index-js"><a href="#index-js" class="headerlink" title="index.js"></a>index.js</h4><p>声明state，getters,mutations,actions导出store</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> Vue <span class="keyword">from</span> <span class="string">'vue'</span></span><br><span class="line"><span class="keyword">import</span> Vuex <span class="keyword">from</span> <span class="string">'vuex'</span></span><br><span class="line">Vue.use(Vuex)</span><br><span class="line"><span class="comment">// 声明一个需要全局维护的状态state</span></span><br><span class="line"><span class="keyword">const</span> state = &#123;</span><br><span class="line">    name: <span class="string">'默认组件'</span>, <span class="comment">//定义HomeA,HomeB组件共享数据</span></span><br><span class="line">    id: <span class="string">'123'</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//声明getters</span></span><br><span class="line"><span class="comment">//从store的state中派生出的状态。</span></span><br><span class="line"><span class="keyword">const</span> getters = &#123;</span><br><span class="line">    name: <span class="function"><span class="params">state</span> =&gt;</span> state.name,</span><br><span class="line">    bname: <span class="function"><span class="params">state</span> =&gt;</span> &#123;<span class="comment">//传递给HomeB组件的数据要添加“-B”</span></span><br><span class="line">        <span class="keyword">return</span> state.name + <span class="string">"-B"</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//声明mutations</span></span><br><span class="line"><span class="comment">//提交mutation是更改Vuex中的store中的状态的唯一方法。</span></span><br><span class="line"><span class="keyword">const</span> mutations = &#123;</span><br><span class="line">    SET_NAME: <span class="function">(<span class="params">state, name</span>) =&gt;</span> &#123;</span><br><span class="line">        state.name = name</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//声明actions</span></span><br><span class="line"><span class="comment">//Action 提交的是 mutation，而不是直接变更状态。</span></span><br><span class="line"><span class="comment">//Action 可以包含任意异步操作。</span></span><br><span class="line"><span class="keyword">const</span> actions = &#123;</span><br><span class="line">    modifyName(&#123; commit &#125;, name) &#123;</span><br><span class="line">        <span class="keyword">return</span> commit(<span class="string">'SET_NAME'</span>, name)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 注册</span></span><br><span class="line"><span class="keyword">const</span> store = <span class="keyword">new</span> Vuex.Store(&#123;</span><br><span class="line">    state, <span class="comment">// 共同维护的一个状态，state里面可以是很多个全局状态</span></span><br><span class="line">    getters, <span class="comment">// 获取数据并渲染</span></span><br><span class="line">    actions, <span class="comment">// 数据的异步操作</span></span><br><span class="line">    mutations<span class="comment">// 处理数据的唯一途径，state的改变和赋值都在这里</span></span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> store</span><br><span class="line"><span class="comment">// 导出store，并在main.js中引用注册</span></span><br></pre></td></tr></table></figure>

<h3 id="配置Vuex"><a href="#配置Vuex" class="headerlink" title="配置Vuex"></a>配置Vuex</h3><p>在main.js中导入store实例</p>
<p><img src="http://i2.tiimg.com/709257/ff1e3b135efbc530.png" alt="Markdown"></p>
<h3 id="新建组件A"><a href="#新建组件A" class="headerlink" title="新建组件A"></a>新建组件A</h3><p>在components下新建HomeA.vue组件</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div <span class="class"><span class="keyword">class</span></span>=<span class="string">"componentsA"</span>&gt;</span><br><span class="line">    &lt;P <span class="class"><span class="keyword">class</span></span>=<span class="string">"title"</span>&gt;组件A&lt;<span class="regexp">/P&gt;</span></span><br><span class="line"><span class="regexp">    &lt;P class="titleName"&gt;名称：&#123;&#123;name&#125;&#125;&lt;/</span>P&gt;</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">      &lt;!-- 点击修改 为 A组件  --&gt;</span><br><span class="line">      &lt;button <span class="class"><span class="keyword">class</span></span>=<span class="string">"btn"</span> @click=<span class="string">"modifyName('A组件')"</span>&gt;修改为：A组件&lt;<span class="regexp">/button&gt;</span></span><br><span class="line"><span class="regexp">    &lt;/</span>div&gt;</span><br><span class="line">    &lt;div <span class="class"><span class="keyword">class</span></span>=<span class="string">"marTop"</span>&gt;</span><br><span class="line">      &lt;button <span class="class"><span class="keyword">class</span></span>=<span class="string">"btn"</span> @click=<span class="string">"trunToB"</span>&gt;跳转到B页面&lt;<span class="regexp">/button&gt;</span></span><br><span class="line"><span class="regexp">    &lt;/</span>div&gt;</span><br><span class="line">  &lt;<span class="regexp">/div&gt;</span></span><br><span class="line"><span class="regexp">&lt;/</span>template&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line"><span class="keyword">import</span> &#123; mapActions, mapGetters &#125; <span class="keyword">from</span> <span class="string">"vuex"</span>;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  name: <span class="string">"HomeA"</span>,</span><br><span class="line">  data() &#123;</span><br><span class="line">    <span class="keyword">return</span> &#123;&#125;;</span><br><span class="line">  &#125;,</span><br><span class="line">  methods: &#123;</span><br><span class="line">    ...mapActions(</span><br><span class="line">      <span class="comment">// 语法糖</span></span><br><span class="line">      <span class="comment">// 相当于this.$store.dispatch('modifyName'),提交这个方法</span></span><br><span class="line">      [<span class="string">"modifyName"</span>] </span><br><span class="line">    ),</span><br><span class="line">    trunToB() &#123;</span><br><span class="line">      <span class="keyword">this</span>.$router.push(&#123; <span class="attr">path</span>: <span class="string">"/home/HomeB"</span> &#125;); <span class="comment">// 路由跳转到B</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  computed: &#123;</span><br><span class="line">    ...mapGetters([<span class="string">"name"</span>]) <span class="comment">// 动态计算属性，相当于this.$store.getters.resturantName</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br><span class="line">&lt;<span class="regexp">/script&gt;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">&lt;!-- Add "scoped" attribute to limit CSS to this component only --&gt;</span></span><br><span class="line"><span class="regexp">&lt;style scoped&gt;</span></span><br><span class="line"><span class="regexp">.title,</span></span><br><span class="line"><span class="regexp">.titleName &#123;</span></span><br><span class="line"><span class="regexp">  color: blue;</span></span><br><span class="line"><span class="regexp">  font-size: 20px;</span></span><br><span class="line"><span class="regexp">&#125;</span></span><br><span class="line"><span class="regexp">.btn &#123;</span></span><br><span class="line"><span class="regexp">  width: 160px;</span></span><br><span class="line"><span class="regexp">  height: 40px;</span></span><br><span class="line"><span class="regexp">  background-color: blue;</span></span><br><span class="line"><span class="regexp">  border: none;</span></span><br><span class="line"><span class="regexp">  outline: none;</span></span><br><span class="line"><span class="regexp">  color: #ffffff;</span></span><br><span class="line"><span class="regexp">  border-radius: 4px;</span></span><br><span class="line"><span class="regexp">&#125;</span></span><br><span class="line"><span class="regexp">.marTop &#123;</span></span><br><span class="line"><span class="regexp">  margin-top: 20px;</span></span><br><span class="line"><span class="regexp">&#125;</span></span><br><span class="line"><span class="regexp">&lt;/</span>style&gt;</span><br></pre></td></tr></table></figure>

<h3 id="新建组件B"><a href="#新建组件B" class="headerlink" title="新建组件B"></a>新建组件B</h3><p>在components下新建HomeB.vue组件</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div <span class="class"><span class="keyword">class</span></span>=<span class="string">"componentsB"</span>&gt;</span><br><span class="line">    &lt;P <span class="class"><span class="keyword">class</span></span>=<span class="string">"title"</span>&gt;组件B&lt;<span class="regexp">/P&gt;</span></span><br><span class="line"><span class="regexp">    &lt;P class="titleName"&gt;名称：&#123;&#123;name&#125;&#125;&lt;/</span>P&gt;</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">      &lt;!-- 点击修改 B组件  --&gt;</span><br><span class="line">      &lt;button <span class="class"><span class="keyword">class</span></span>=<span class="string">"btn"</span> @click=<span class="string">"changeName('B组件')"</span>&gt;修改为：B租件&lt;<span class="regexp">/button&gt;</span></span><br><span class="line"><span class="regexp">    &lt;/</span>div&gt;</span><br><span class="line">    &lt;div <span class="class"><span class="keyword">class</span></span>=<span class="string">"marTop"</span>&gt;</span><br><span class="line">      &lt;button <span class="class"><span class="keyword">class</span></span>=<span class="string">"btn"</span> @click=<span class="string">"trunToA"</span>&gt;跳转到A页面&lt;<span class="regexp">/button&gt;</span></span><br><span class="line"><span class="regexp">    &lt;/</span>div&gt;</span><br><span class="line">  &lt;<span class="regexp">/div&gt;</span></span><br><span class="line"><span class="regexp">&lt;/</span>template&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  name: <span class="string">"HomeB"</span>,</span><br><span class="line">  data() &#123;</span><br><span class="line">    <span class="keyword">return</span> &#123;&#125;;</span><br><span class="line">  &#125;,</span><br><span class="line">  methods: &#123;</span><br><span class="line">    changeName(myName) &#123;</span><br><span class="line">      <span class="keyword">this</span>.$store.dispatch(<span class="string">"modifyName"</span>, myName);</span><br><span class="line">    &#125;,</span><br><span class="line">    trunToA() &#123;</span><br><span class="line">      <span class="keyword">this</span>.$router.push(&#123; <span class="attr">path</span>: <span class="string">"/home/HomeA"</span> &#125;); <span class="comment">// 路由跳转到B</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  computed: &#123;</span><br><span class="line">    name: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">      <span class="comment">//获得name的名字</span></span><br><span class="line">      <span class="keyword">return</span> <span class="keyword">this</span>.$store.getters.bname;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br><span class="line">&lt;<span class="regexp">/script&gt;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">&lt;!-- Add "scoped" attribute to limit CSS to this component only --&gt;</span></span><br><span class="line"><span class="regexp">&lt;style scoped&gt;</span></span><br><span class="line"><span class="regexp">.title,</span></span><br><span class="line"><span class="regexp">.titleName &#123;</span></span><br><span class="line"><span class="regexp">  color: red;</span></span><br><span class="line"><span class="regexp">  font-size: 20px;</span></span><br><span class="line"><span class="regexp">&#125;</span></span><br><span class="line"><span class="regexp">.btn &#123;</span></span><br><span class="line"><span class="regexp">  width: 160px;</span></span><br><span class="line"><span class="regexp">  height: 40px;</span></span><br><span class="line"><span class="regexp">  background-color: red;</span></span><br><span class="line"><span class="regexp">  border: none;</span></span><br><span class="line"><span class="regexp">  outline: none;</span></span><br><span class="line"><span class="regexp">  color: #ffffff;</span></span><br><span class="line"><span class="regexp">  border-radius: 4px;</span></span><br><span class="line"><span class="regexp">&#125;</span></span><br><span class="line"><span class="regexp">.marTop &#123;</span></span><br><span class="line"><span class="regexp">  margin-top: 20px;</span></span><br><span class="line"><span class="regexp">&#125;</span></span><br><span class="line"><span class="regexp">&lt;/</span>style&gt;</span><br></pre></td></tr></table></figure>

<h3 id="路由配置"><a href="#路由配置" class="headerlink" title="路由配置"></a>路由配置</h3><p>修改router/index.js</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> Vue <span class="keyword">from</span> <span class="string">'vue'</span></span><br><span class="line"><span class="keyword">import</span> Router <span class="keyword">from</span> <span class="string">'vue-router'</span></span><br><span class="line"><span class="keyword">import</span> HomeA <span class="keyword">from</span> <span class="string">'@/components/HomeA'</span></span><br><span class="line"><span class="keyword">import</span> HomeB <span class="keyword">from</span> <span class="string">'@/components/HomeB'</span></span><br><span class="line">Vue.use(Router)</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="keyword">new</span> Router(&#123;</span><br><span class="line">  routes: [</span><br><span class="line">    &#123;</span><br><span class="line">      path: <span class="string">'/'</span>,</span><br><span class="line">      name: <span class="string">'HomeA'</span>,</span><br><span class="line">      component: HomeA</span><br><span class="line">    &#125;,</span><br><span class="line">    &#123;</span><br><span class="line">      path: <span class="string">'/home/HomeA'</span>,</span><br><span class="line">      name: <span class="string">'HomeA'</span>,</span><br><span class="line">      component: HomeA</span><br><span class="line">    &#125;,</span><br><span class="line">    &#123;</span><br><span class="line">      path: <span class="string">'/home/HomeB'</span>,</span><br><span class="line">      name: <span class="string">'HomeB'</span>,</span><br><span class="line">      component: HomeB</span><br><span class="line">    &#125;</span><br><span class="line">  ]</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<h3 id="项目启动"><a href="#项目启动" class="headerlink" title="项目启动"></a>项目启动</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm run dev</span><br></pre></td></tr></table></figure>

<h3 id="执行结果"><a href="#执行结果" class="headerlink" title="执行结果"></a>执行结果</h3><h4 id="默认"><a href="#默认" class="headerlink" title="默认"></a>默认</h4><p>显示组件A页面</p>
<p><img src="http://i2.tiimg.com/709257/59403da87ebb89c5.png" alt="Markdown"></p>
<h4 id="点击按钮"><a href="#点击按钮" class="headerlink" title="点击按钮"></a>点击按钮</h4><p>点击【修改为：A组件】按钮:页面名称内容变化</p>
<p><img src="http://i2.tiimg.com/709257/56c591cfbbb96618.png" alt="Markdown"></p>
<h4 id="跳转B"><a href="#跳转B" class="headerlink" title="跳转B"></a>跳转B</h4><p>点击【跳转到B页面】按钮：在B组件显示A组件修改的内容”A组件”，并且添加一个”_B”。</p>
<p><img src="http://i2.tiimg.com/709257/6e6566450cc69770.png" alt="Markdown"></p>
<h4 id="点击按钮-1"><a href="#点击按钮-1" class="headerlink" title="点击按钮"></a>点击按钮</h4><p>点击【修改为：B组件】按钮：页面名称内容变化</p>
<p><img src="http://i2.tiimg.com/709257/aa1987c03e26cc54.png" alt="Markdown"></p>
<h4 id="跳转A"><a href="#跳转A" class="headerlink" title="跳转A"></a>跳转A</h4><p>显示B修改后的内容</p>
<p><img src="http://i2.tiimg.com/709257/a943ca6648f28d64.png" alt="Markdown"></p>
<h3 id="模块练习"><a href="#模块练习" class="headerlink" title="模块练习"></a>模块练习</h3><h4 id="添加模块"><a href="#添加模块" class="headerlink" title="添加模块"></a>添加模块</h4><p>在src/store新建moudles文件夹，在此文件夹下添加user.js文件</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> state=&#123;</span><br><span class="line">    moudleName:<span class="string">"user"</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> mutations=&#123;</span><br><span class="line">    SET_MOUDLENAME:<span class="function">(<span class="params">state,newName</span>)=&gt;</span>&#123;</span><br><span class="line">        state.moudleName=newName</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> getters=&#123;</span><br><span class="line">    moudleName:<span class="function"><span class="params">state</span>=&gt;</span>state.moudleName</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> actions=&#123;</span><br><span class="line">    changeMoudleName(&#123;commit&#125;,newName)&#123;</span><br><span class="line">        <span class="keyword">return</span> commit(<span class="string">"SET_MOUDLENAME"</span>,newName)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span>&#123;</span><br><span class="line">    namespaced:<span class="literal">true</span>,</span><br><span class="line">    state,</span><br><span class="line">    getters,</span><br><span class="line">    mutations,</span><br><span class="line">    actions</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="引入模块"><a href="#引入模块" class="headerlink" title="引入模块"></a>引入模块</h4><p>在store/index.js文件中引入模块</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> Vue <span class="keyword">from</span> <span class="string">'vue'</span></span><br><span class="line"><span class="keyword">import</span> Vuex <span class="keyword">from</span> <span class="string">'vuex'</span></span><br><span class="line"><span class="comment">//引入user模块</span></span><br><span class="line"><span class="keyword">import</span> user <span class="keyword">from</span> <span class="string">"./moudles/user"</span>  </span><br><span class="line">......</span><br><span class="line"><span class="comment">// 注册</span></span><br><span class="line"><span class="keyword">const</span> store = <span class="keyword">new</span> Vuex.Store(&#123;</span><br><span class="line">    state, <span class="comment">// 共同维护的一个状态，state里面可以是很多个全局状态</span></span><br><span class="line">    getters, <span class="comment">// 获取数据并渲染</span></span><br><span class="line">    actions, <span class="comment">// 数据的异步操作</span></span><br><span class="line">    mutations, <span class="comment">// 处理数据的唯一途径，state的改变和赋值都在这里</span></span><br><span class="line">    </span><br><span class="line">    modules:&#123; <span class="comment">//添加user模块</span></span><br><span class="line">        user</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> store</span><br><span class="line"><span class="comment">// 导出store，并在main.js中引用注册</span></span><br></pre></td></tr></table></figure>

<h4 id="组件A调用"><a href="#组件A调用" class="headerlink" title="组件A调用"></a>组件A调用</h4><p>在HomeA.vue中添加如下代码</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">//template中添加</span><br><span class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span>&gt;</span>user Store的名字：&#123;&#123;moudleName&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//script中添加到methods中</span></span><br><span class="line">  ...mapActions(<span class="string">"user"</span>,</span><br><span class="line">   	&#123;</span><br><span class="line">        modifyName:<span class="string">"changeMoudleName"</span> <span class="comment">//actions调用</span></span><br><span class="line">      &#125;</span><br><span class="line">   )</span><br></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//script中添加到computed中</span></span><br><span class="line">...mapGetters(<span class="string">"user"</span>,[<span class="string">"moudleName"</span>])  <span class="comment">//getters调用</span></span><br></pre></td></tr></table></figure>

<h4 id="组件B调用"><a href="#组件B调用" class="headerlink" title="组件B调用"></a>组件B调用</h4><p>在HomeB.vue中添加如下代码</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">//template中添加</span><br><span class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span>&gt;</span>user Store的名字：&#123;&#123;moudleName&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//在changeName方法中添加如下代码</span></span><br><span class="line"> <span class="keyword">this</span>.$store.dispatch(<span class="string">"user/changeMoudleName"</span>,<span class="string">"userName"</span>)</span><br></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//script中添加到computed中</span></span><br><span class="line">moudleName()&#123;</span><br><span class="line">      <span class="keyword">return</span> <span class="keyword">this</span>.$store.getters[<span class="string">"user/moudleName"</span>]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="结果"><a href="#结果" class="headerlink" title="结果"></a>结果</h4><p>项目启动，观察页面显示结果。</p>
<p>点击按钮，观察页面显示结果。</p>
<h2 id="试一下"><a href="#试一下" class="headerlink" title="试一下"></a>试一下</h2><p>在store中添加count属性，初始值是10，分别在HomeA和HomeB中读取，在HomeA中设定按钮，点击count值增加1。在HomeB中设定按钮，点击count值加倍。</p>

      
    </div>

    
      
      

  <div class="post-copyright">
    <p class="copyright-item">
      <span>原文作者: </span>
      <a href="http://jy4416.gitee.io/blog">jy</a>
    </p>
    <p class="copyright-item">
      <span>原文链接: </span>
      <a href="http://jy4416.gitee.io/blog/2020/04/14/vuex/">http://jy4416.gitee.io/blog/2020/04/14/vuex/</a>
    </p>
    <p class="copyright-item">
      <span>许可协议: </span>
      
      <a rel="license" href="http://creativecommons.org/licenses/by-nc/4.0/" target="_blank">知识共享署名-非商业性使用 4.0 国际许可协议</a>
    </p>
  </div>



      
      
    

    
      <footer class="post-footer">
        
          <div class="post-tags">
            
              <a href="/blog/tags/Vue%E6%8A%80%E6%9C%AF/">Vue技术</a>
            
          </div>
        
        
        
  <nav class="post-nav">
    
      <a class="prev" href="/blog/2020/04/15/asgit/">
        <i class="iconfont icon-left"></i>
        <span class="prev-text nav-default">Android Studio Git使用</span>
        <span class="prev-text nav-mobile">上一篇</span>
      </a>
    
    
      <a class="next" href="/blog/2020/04/14/vue-base/">
        <span class="next-text nav-default">Vue基础</span>
        <span class="prev-text nav-mobile">下一篇</span>
        <i class="iconfont icon-right"></i>
      </a>
    
  </nav>

      </footer>
    

  </article>


          </div>
          
  <div class="comments" id="comments">
    
  </div>


        </div>
      </main>

      <footer id="footer" class="footer">

  <div class="social-links">
    
      
        
          <a href="mailto:jy4416@aliyun.com" class="iconfont icon-email" title="email"></a>
        
      
    
      
    
      
    
      
    
      
    
      
    
      
        
          <a href="https://github.com/jy4416" target="_blank" rel="noopener" class="iconfont icon-github" title="github"></a>
        
      
    
      
    
      
    
      
    
      
    
      
    
      
    
    
    
      
      <a href="/blog/atom.xml" class="iconfont icon-rss" title="rss"></a>
    
  </div>


<div class="copyright">
  <span class="power-by">
    由 <a class="hexo-link" href="https://hexo.io/" target="_blank" rel="noopener">Hexo</a> 强力驱动
  </span>
  <span class="division">|</span>
  <span class="theme-info">
    主题 - 
    <a class="theme-link" href="https://github.com/ahonn/hexo-theme-even" target="_blank" rel="noopener">Even</a>
  </span>

  <span class="copyright-year">
    
    &copy; 
    
    2020

    <span class="heart">
      <i class="iconfont icon-heart"></i>
    </span>
    <span class="author">jy</span>
  </span>
</div>

      </footer>

      <div class="back-to-top" id="back-to-top">
        <i class="iconfont icon-up"></i>
      </div>
    </div>

    
  
  

  



    
  



  
  





  
    <script type="text/javascript" src="/blog/lib/jquery/jquery.min.js"></script>
  

  
    <script type="text/javascript" src="/blog/lib/slideout/slideout.js"></script>
  

  
    <script type="text/javascript" src="/blog/lib/fancybox/jquery.fancybox.pack.js"></script>
  

  
    <script type="text/javascript" src="/blog/lib/pjax/jquery.pjax.min.js"></script>
  

  
    <script type="text/javascript" src="/blog/lib/nprogress/nprogress.min.js"></script>
  


    <script type="text/javascript" src="/blog/js/src/even.js?v=2.9.0"></script>

  </body>
</html>
